<template>
  <div ref="rateChart" style="width: 100%; height: 100%"></div>
</template>
<script>
let chart = null
export default {
  props: {
    title: String,
    data: Object
  },
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (null != chart && undefined != chart) {
        chart.dispose()
      }
      chart = this.$echarts.init(this.$refs.rateChart)
      this.setOptions()
    },
    setOptions() {
      let curedRateData = [this.data.curedRate, this.data.curedRate, this.data.curedRate]
      let deadRateData = [this.data.deadRate, this.data.deadRate, this.data.deadRate]
      var option = {
        title: [
          {
            text: '治愈率',
            x: '16%',
            y: '75%',
            textStyle: {
              fontSize: 12,
              fontWeight: '100',
              color: '#5dc3ea'
            }
          },
          {
            text: '死亡率',
            x: '67%',
            y: '75%',
            textStyle: {
              fontSize: 12,
              fontWeight: '100',
              color: '#5dc3ea'
            }
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '60%',
            center: ['25%', '45%'],
            color: [
              {
                type: 'linear',
                x: 0.5,
                y: 0.5,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#446bf5'
                  },
                  {
                    offset: 1,
                    color: '#2ca3e2'
                  }
                ],
                globalCoord: false
              }
            ],
            data: curedRateData, // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1, //外边框
              // borderColor: '#23cc72', //边框颜色
              color: 'RGBA(51, 66, 127, 0.7)' //边框内部填充部分颜色
            },
            label: {
              formatter: (this.data.curedRate * 100).toFixed(2) + '%',
              textStyle: {
                fontSize: 15,
                color: '#fff'
              }
            },
            outline: {
              show: true,
              borderDistance: 2,
              itemStyle: {
                color: 'none',
                borderColor: '#294D99',
                borderWidth: 4,
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.25)'
              }
            }
          },
          {
            //第二个球的填充
            type: 'liquidFill',
            radius: '60%',
            center: ['75%', '45%'],
            color: [
              {
                type: 'linear',
                x: 0.5,
                y: 0.5,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#446bf5'
                  },
                  {
                    offset: 1,
                    color: '#2ca3e2'
                  }
                ],
                globalCoord: false
              }
            ],
            data: deadRateData, // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1, //外边框
              // borderColor: '#23cc72', //边框颜色
              color: 'RGBA(51, 66, 127, 0.7)' //边框内部填充部分颜色
            },
            label: {
              formatter: (this.data.deadRate * 100).toFixed(2) + '%',
              textStyle: {
                fontSize: 15,
                color: '#fff'
              }
            },
            outline: {
              show: true,
              borderDistance: 2,
              itemStyle: {
                color: 'none',
                borderColor: '#294D99',
                borderWidth: 4,
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.25)'
              }
            }
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>